<!--
 * @file 应用根组件
 * @description GPS轨迹可视化系统根组件
 * @date 2024-08-14 (更新)
 -->
<template>
  <view class="app">
    <view class="app__container">
      <view class="app__content">
        <!-- 页面内容区域 -->
        <view class="app__page">
          <page-meta>
            <navigation-bar
              :title="navigationBarTitle"
              :loading="isLoading"
              :front-color="navigationBarFrontColor"
              :background-color="navigationBarBackgroundColor"
            />
          </page-meta>
          <!-- 页面插槽 -->
          <slot></slot>
        </view>
      </view>
    </view>
    
    <!-- 页面生命周期监听组件 -->
    <PageLifecycle 
      ref="pageLifecycleRef"
      @route-change="handleRouteChange" 
    />
  </view>
</template>

<script lang="ts">
// App级别生命周期钩子必须使用选项式API
// 导入已经在script setup中导入的logger，这里不重复导入

export default {
  // App 全局生命周期
  onLaunch() {
    console.info('[main.ts:74] GPS轨迹可视化系统已启动');
    
    // 在这里可以执行一些全局初始化操作，如检查更新、初始化环境等
    if (typeof window !== 'undefined') {
      // 记录启动时间
      // @ts-ignore - 添加自定义属性到window
      window._appStartTime = Date.now();
    }
  },
  onShow() {
    console.info('[main.ts:35] 应用进入前台');
    
    // 应用从后台切换到前台时的逻辑
    // 如恢复轮询、重新连接WebSocket等
  },
  onHide() {
    console.info('[main.ts:42] 应用进入后台');
    
    // 应用从前台切换到后台时的逻辑
    // 如暂停轮询、断开非必要连接以节省资源等
  },
  
  onError() {
    console.error('[main.ts:51] 应用错误:');
    
    // 全局错误处理逻辑
    // 如上报错误日志、提示用户等
  }
}
</script>

<script setup lang="ts">
// @ts-ignore - uni-app环境下Vue导入需要忽略类型检查
import { ref, onMounted, onUnmounted } from 'vue'
import { useMapStore } from '@/stores/modules/map'
import { appInitializer } from '@/services/appInitializer'
import { logger } from '@/utils/system/logger'
import PageLifecycle from '@/components/common/PageLifecycle.vue'
import { useMapInitializer } from '@/hooks'

// 导航栏配置 - 从环境变量中获取应用标题
const navigationBarTitle = ref(import.meta.env.VITE_APP_TITLE || 'GPS轨迹可视化系统')
const navigationBarFrontColor = ref('#000000')
const navigationBarBackgroundColor = ref('#F8F8F8')
const isLoading = ref(false)

// store实例
const mapStore = useMapStore();

// 状态跟踪
const currentRoute = ref('');
const pageLifecycleRef = ref<InstanceType<typeof PageLifecycle> | null>(null);

// 使用地图初始化钩子
const { 
  initialized: mapInitialized, 
  initializeMap 
} = useMapInitializer({
  autoInit: false, // 由我们手动控制初始化时机
  loadTrack: true,
  autoInitFeatures: true
});

/**
 * 处理路由变化事件
 * @param {Object} event 路由事件对象
 */
function handleRouteChange(event: { route: string; page: any; params: Record<string, any> }): void {
  currentRoute.value = event.route;
  logger.info('App捕获路由变化:', currentRoute.value);
  
  // 更新应用初始化器路由
  appInitializer.setCurrentRoute(currentRoute.value);
  
  // 检查是否需要初始化地图资源
  if (mapStore.isMapRouteActive() && !mapInitialized.value) {
    logger.info('检测到地图相关页面，开始按需初始化地图资源');
    initializeMap();
  }
}

// 组件挂载时执行初始化
onMounted(() => {
  logger.info('应用根组件挂载完成');
  
  // 使用appInitializer进行业务初始化
  if (appInitializer && !appInitializer.initialized) {
    appInitializer.initialize().catch(err => {
      logger.error('应用初始化失败', err);
    });
  }
  
})

// 页面加载状态
const setLoading = (loading: boolean) => {
  isLoading.value = loading;
};

// 设置页面标题
const setTitle = (title: string) => {
  navigationBarTitle.value = title;
};

// 导出页面方法
defineExpose({
  setLoading,
  setTitle,
});
</script>

<style lang="scss">
@import '@/styles/index.scss';

/* 全局布局样式 */
html, body { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
  overflow: hidden;
}

#app { 
  height: 100%;
  width: 100%;
}

/* 应用主体样式 */
.app {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: var(--app-bg-color, #f0f2f5);

  &__container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  &__content {
    flex: 1;
    overflow: hidden;
    position: relative;
  }

  &__page {
    height: 100%;
    width: 100%;
    background-color: var(--page-bg-color, #f5f5f5);
    position: relative;
    z-index: 1;
  }
}

/* Uni-app相关样式 */
page {
  background-color: var(--page-bg-color, #f5f5f5);
}

/* 全局元素样式 */
view {
  box-sizing: border-box;
}
</style> 